<template>
    <div>
        <el-button @click="ShowAdd">添加操作人员</el-button>
    </div>
    <el-table :data="operList" style="width: 100%">
        <el-table-column prop="adminid" label="编号" width="350" />
        <el-table-column prop="adminname" label="账户名" width="150" />
        <el-table-column label="角色" width="340">
            <template #default="scope">
                <div>{{ getRoleName(scope.row.role) }}</div>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template #default="scope">
                <el-button link type="primary" size="small"
                @click="EditOper(scope.row.adminname)"
                >
                    编辑</el-button>
                <el-button link type="primary" size="small" @click="RemoveOper(scope.row.adminid)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加弹出框 -->
    <el-dialog v-model="isShowAdd"  title="添加操作人员" width="500">
        <AddOperators @closeWin="closeAddFn"></AddOperators>
    </el-dialog>
    <!-- 修改弹出框 -->
    <el-dialog v-model="isShowEdit"  title="修改操作人员" width="500">
        <editOperators :adminname="editadminname" @closeWin="closeEditFn"></editOperators>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { IOper } from "@/myTypes/index"
import { getOperator, removeOp } from "@/api/oper"
import { ElMessage, ElMessageBox } from 'element-plus'
import AddOperators from './AddOperators.vue';
import editOperators from "./editOperators.vue"

// 定义初始化数据----上面渲染的
const operList = reactive<Array<IOper>>([
    {
        _id: "65e2978016a59014e9859346",
        adminname: "asdf",
        password: "e10adc3949ba59abbe56e057f20f883e",
        role: 1,
        adminid: "admin_50d4ccd9-fb43-4f9e-afd2-9f70d92a9fb2",
        checkedKeys: [
            "用户管理",
            "用户列表",
            "用户详情",
            "产品列表",
            "秒杀列表",
            "视图管理",
            "数据统计图",
            "地图管理",
            "地图",
            "产品管理",
        ],
    },
])


// 处理定义1,2,3,4是什么用户
const getRoleName = (role: number) => {
    let roleobj = {
        1: "超级管理员",
        2: "轮播图维护人员",
        3: "商品维护人员",
        4: "售后人员"
    }
    return roleobj[role]
}


// 初始化页面进入加载的数据
const getoperlist = async () => {
    let res = await getOperator()
    if (res.data.code == "200") {
        operList.push(...res.data.data)
    }
    // console.log(res);

}
getoperlist()


// 删除操作人员
// RemoveOper
const RemoveOper = (adminid: string) => {
    ElMessageBox.confirm(
        '您确定要删除该用户嘛',
        '删除提醒',
        {
            confirmButtonText: '确认',
            cancelButtonText: '点错了',
            type: 'warning',
        }
    ).then(() => {
        removeOp(adminid).then(res => {
            if (res.data.code == "200") {
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
                getoperlist()
            }
        })
    })

}


// 添加操作人员
const isShowAdd = ref(false)
const ShowAdd = ()=>{
    isShowAdd.value = true
}

// 关闭添加对话框
const closeAddFn=(isReade:boolean)=>{
    isShowAdd.value = false 
    isReade && getoperlist()
}




// isShowEdit 编辑修改--点击编辑进行显示修改
const isShowEdit = ref(false)
const editadminname = ref("")
const EditOper=(adminname:string)=>{
    isShowEdit.value = true
    editadminname.value = adminname
}

// closeEditFn
// 关闭修改对话框
const closeEditFn=(isReade:boolean)=>{
    isShowEdit.value = false 
    isReade && getoperlist()
}



</script>

<style scoped></style>